<template>
  <el-dialog :title="title" :visible.sync="open" width="720px" :close-on-click-modal="false" append-to-body>
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-row v-if="deviceType===2">
        <el-col :span="24">
          <el-form-item label="用户编号" prop="terminalID">
            <el-input v-model="form.terminalID" placeholder="请输入用户编号"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="10">
        <el-col :span="12">
          <el-card header="旧表信息">
            <el-form-item label="生产厂家" prop="supplieridOld">
              <el-select v-model="form.supplieridOld" disabled placeholder="请选择生产厂家" style="width: 100%;">
                <el-option v-for="dict in dict.type.terminal_supplier"
                           :key="dict.value" :label="dict.label" :value="dict.value"/>
              </el-select>
            </el-form-item>
            <el-form-item label="设备编号" prop="easionidOld">
              <el-input v-model="form.easionidOld" readonly placeholder="请输入原设备编号"/>
            </el-form-item>
            <el-form-item label="表读数" prop="totalflowOld">
              <el-input v-model="form.totalflowOld" placeholder="请输入原表读数"/>
            </el-form-item>
          </el-card>
        </el-col>

        <el-col :span="12">
          <el-card header="新表信息">
            <el-form-item label="生产厂家" prop="supplieridNew">
              <el-select v-model="form.supplieridNew" placeholder="请选择生产厂家" style="width: 100%;">
                <el-option v-for="dict in dict.type.terminal_supplier"
                           :key="dict.value" :label="dict.label" :value="dict.value"/>
              </el-select>
            </el-form-item>
            <el-form-item label="设备编号" prop="easionidNew">
              <el-input v-model="form.easionidNew" placeholder="请输入新设备编号"/>
            </el-form-item>
            <el-form-item label="表读数" prop="totalflowNew">
              <el-input v-model="form.totalflowNew" placeholder="请输入新表读数"/>
            </el-form-item>
          </el-card>
        </el-col>
      </el-row>

      <el-row style="margin-top: 10px;">
        <el-col :span="24">
          <el-form-item label="换表日期" prop="replaceDate">
            <el-date-picker type="date" v-model="form.replaceDate" style="width: 100%;" placeholder="请输入换表日期"/>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="form.remark" placeholder="请输入备注"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {addTerminalsReplace} from '@/api/leakage/terminalsReplace'

export default {
  name: "DeviceReplace",
  dicts: ['terminal_supplier'],
  props: {
    callback: {
      type: Function,
      default: () => {

      }
    }
  },
  data() {
    return {
      title: '换表',
      open: false,
      deviceType: undefined,
      form: {},
      // 表单校验
      rules: {
        totalflowOld: [
          {required: true, message: "请输入原表读数", trigger: "blur"}
        ],
        replaceDate: [
          {required: true, message: "请选择换表日期", trigger: "blur"}
        ],
        supplieridNew: [
          {required: true, message: "请选择新表生产厂家", trigger: "blur"}
        ],
        easionidNew: [
          {required: true, message: "请输入新表设备编号", trigger: "blur"}
        ],
        totalflowNew: [
          {required: true, message: "请输入新表读数", trigger: "blur"}
        ],
      }
    }
  },
  methods: {
    openDialog(deviceType, terminalOld) {
      this.reset();
      this.deviceType = deviceType
      if (deviceType === 1) {
        this.form.easionidOld = terminalOld.terminalID.substr(10)
        this.title = '大表换表'
      } else {
        this.form.terminalID = terminalOld.terminalID
        this.form.easionidOld = terminalOld.easIonID.substr(10)
        this.title = '户表换表'
      }
      this.form.supplieridOld = terminalOld.supplierID
      this.open = true
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.easIon === 0 && this.form.supplierID == undefined) {
            this.$message.error('请选择生产厂家')
            return
          }

          this.form.terminalType = this.deviceType
          addTerminalsReplace(this.form).then(response => {
            this.$modal.msgSuccess("换表成功");
            this.open = false;
            this.callback();
          })
        }
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        ID: null,
        tenantId: null,
        AreaID: null,
        terminalID: null,
        terminalAddress: null,
        TerminalMark: null,
        caliber: null,
        userName: null,
        meterReading: null,
        easIon: null,
        easIonID: null,
        supplierID: null
      };
      this.resetForm("form");
    },
  },
}
</script>

<style scoped>

</style>
